<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>Welcome to Pwnography!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap-responsive.min.css"
	th:href="@{/css/bootstrap-responsive.min.css}" />

<!-- This style is needed for top navigation bar. It needs some space. Otherwise it would cover body. -->
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
</style>
</head>

<body>
	<!-- TOP MENU -->
	<div th:substituteby="template :: top-menu"></div>
	<!-- /TOP MENU -->

	<!-- MAIN CONTAINER -->
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="page-header">
				<h1>Wczytywanie plików</h1>
			</div>
		</div>

		<!-- MESSAGE BOXES -->
		<div class="row-fluid" th:include="template :: message-boxes"></div>
		<!-- /MESSAGE BOXES -->

		<div class="row-fluid">
			<!-- LEFT COLUMN -->
			<div class="span5">
				<form class="form-horizontal" method="POST"
					th:action="@{/files/upload}" th:object="${form}"
					enctype="multipart/form-data">
					<fieldset>
						<div class="control-group"
							th:classappend="${#fields.hasErrors('file')}? 'error'">
							<label class="control-label" for="fileInput">Plik</label>
							<div class="controls">
								<input id="fileInput" type="file" name="file" class="input-file"
									placeholder="Plik...." th:field="*{file}" />
							</div>
						</div>


						<div class="control-group"
							th:classappend="${#fields.hasErrors('haveColumnNames')}? 'error'">
							<label class="control-label" for="haveColumnNames">
								Nagłówki kolumn </label>
							<div class="controls">
								<label class="checkbox"> <input type="checkbox"
									id="haveColumnNames" th:field="*{haveColumnNames}" /> Tak.
								</label>
								<p th:if="${#fields.hasErrors('haveColumnNames')}">
									<span class="help-inline" th:errors="*{haveColumnNames}">ERROR</span>
								</p>
								<p>
									Jeżeli plik posiada nagłówki zaznacz tą opcję. W przeciwnym
									przypadku zostaną utworzone nagłówki o nazwach
									<code>ColX</code>
									, gdzie
									<code>X</code>
									jest numerem kolumny.
								</p>
							</div>
						</div>


						<div class="form-actions">
							<button class="btn btn-primary" type="submit">
								<i class="icon-upload icon-white"></i> Wczytaj
							</button>
						</div>
					</fieldset>
				</form>
			</div>
			<!-- /LEFT COLUMN -->


			<!-- RIGHT COLUMN -->
			<div class="span7">
				<div class="well">
					<h3>Uwagi</h3>
					<ul>
						<li>Maksymalna wielkość pliku wynosi <strong>10 MB</strong> .
						</li>
						<li>Na chwilę obecną jedynie pliki tekstowe (<strong>TXT</strong>)
							są dozwolonym typem.
						</li>
						<li>Możliwe jest wczytanie <strong>nieograniczonej</strong>
							liczby plików. Ich lista znajduje się w <a href="file/list.html"
							th:href="@{/files/list}">tutaj</a>.
						</li>
						<li>Linie rozpoczynające się od <strong>#</strong> są
							traktowane jako komentarze.
						</li>
						<li>Pierwsza linia musi zawierać nazwy kolumn.</li>
						<li>Każda modyfikacja pliku jest zapisywana w historii
							modyfikacji. Możliwe jest powrócenie do dowolnej z poprzednich
							wersji pliku w każdym momencie.</li>
					</ul>
				</div>
			</div>
			<!-- /RIGHT COLUMN -->
		</div>
	</div>
	<!-- /MAIN CONTAINER -->

	<!-- ======================================================== -->
	<!-- Scripts at bottom of page means faster loading times. -->
	<!-- Latest jQuery -->
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-latest.min.js"></script>
	<!-- Bootstrap -->
	<script type="text/javascript" src="../../js/bootstrap.min.js"
		th:src="@{/js/bootstrap.min.js}"></script>
</body>
</html>